
import "./SvgIconMenu.scss";
import tpl from "./SvgIconMenu.html";
import {Component} from "vue";

const svgIconMenu:Component = {
    template: tpl,
    name: "svgIconMenu",
    components: {},
    props: {
        lineColor: {
            type: String,
            default(): string {
                return "#fff";
            },
        },
        paddingX: {
            type: Number,
            default(): string | number {
                return 4;
            },
        },
        svgWidth: {
            type: Number,
            default(): number {
                return 40;
            },
        },
        svgHeight: {
            type: Number,
            default(): number {
                return 40;
            },
        },
        paddingY: {
            type: Number,
            default(): number {
                return 14;
            },
        },
        offsetYMiddle: {
            type: Number,
            default(): number {
                return 0;
            },
        },
        offsetYBottom: {
            type: Number,
            default(): number {
                return 0;
            },
        },
        offsetYTop: {
            type: Number,
            default(): number {
                return 0;
            },
        },
        lineWidth: {
            type: Number,
            default(): number {
                return 4;
            },
        },
    },
    data() {
        return {
            isOnOpen: true,
        };
    },
    mounted() {
        this.delaySetIsOnHoverFalse();
    },
    computed: {
        viewBox(): string {
            return `0 0 ${this.svgWidth} ${this.svgHeight}`;
        },
        lineMiddleY(): number {
            return this.svgHeight / 2 + this.offsetYMiddle;
        },
        lineBottomY(): number {
            return this.svgHeight - this.paddingY + this.lineWidth + this.offsetYBottom;
        },
        lineTopY(): number {
            return this.paddingY + this.offsetYTop - this.lineWidth;
        },
    },
    methods: {
        delaySetIsOnHoverFalse() {
            window.setTimeout(() => {
                this.isOnOpen = false;
            }, 400);
        },
        updateIsOnOpen(isOnOpen: boolean) {
            this.isOnOpen = isOnOpen;
        },
    },
};

export default svgIconMenu;
